<template>
  <el-aside
    :width="collapse ? '64px' : '220px'"
    class="sidebar"
    :class="{ 'sidebar-collapsed': collapse }"
  >
    <!-- LOGO -->
    <div class="logo" @click="handleLogoClick">
      <span v-if="!collapse">Art Design Pro</span>
      <el-icon v-else><Brush /></el-icon>
    </div>

    <!-- 菜单：多级递归 -->
    <el-menu
      :default-active="$route.path"
      router
      unique-opened
      background-color="#1377c9"
      text-color="#fff"
      active-text-color="#fff"
      :collapse="collapse"
      :collapse-transition="false"
      width="56px"
      @select="handleMenuSelect"
    >
      <div
        v-if="filteredMenuList.length === 0"
        style="color: white; padding: 20px; text-align: center"
      >
        暂无菜单数据
      </div>
      <Menultem v-for="item in filteredMenuList" :key="item.path" :menu="item" :depth="1" />
    </el-menu>

    <!-- 底部用户信息 -->
    <!-- <div class="user-info" v-if="!collapse">
      <el-avatar
        size="40"
        :src="userAvatar"
        @error="handleAvatarError"
      >
        <UserFilled />
      </el-avatar>
      <div class="text">
        <div class="nickname">{{ userName }}</div>
        <div class="email">{{ userEmail }}</div>
      </div>
    </div> -->
  </el-aside>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import Menultem from '@/components/Menultem.vue'
import { useRoute } from 'vue-router'
import { Brush, UserFilled } from '@element-plus/icons-vue'

import { computed, PropType, onMounted } from 'vue'

// 定义菜单项类型
interface MenuItem {
  path: string
  title: string
  icon?: string
  children?: MenuItem[]
  hidden?: boolean
}

// 接收折叠状态属性
const props = defineProps({
  collapse: {
    type: Boolean,
    default: false,
    required: true,
  },
})

const userStore = useUserStore()
const route = useRoute()

// 过滤隐藏的菜单项
const filteredMenuList = computed<MenuItem[]>(() => {
  const menuList = userStore.getMenuList

  const filterMenu = (menuItems: MenuItem[]): MenuItem[] => {
    return menuItems
      .filter((item) => !item.hidden)
      .map((item) => ({
        ...item,
        children: item.children ? filterMenu(item.children) : undefined,
      }))
  }

  return filterMenu(menuList || [])
})

// 用户信息
// const userName = computed(() => userStore.userInfo?.nickname || 'Admin')
// const userEmail = computed(() => userStore.userInfo?.email || 'art.design@gmail.com')
// const userAvatar = computed(() => userStore.userInfo?.avatar || '../views/img/tx1.webp')

// // 处理头像加载失败
// const handleAvatarError = (e: Event) => {
//   const img = e.target as HTMLImageElement
//   img.src = '' // 默认头像
// }

// Logo点击事件
const handleLogoClick = () => {
  // 可添加返回首页等逻辑
  console.log('Logo clicked')
}

// 菜单选择事件处理
const handleMenuSelect = (index: string) => {
  console.log('🎯 菜单项被选择:', index)
  console.log('🎯 当前路由:', route.path)

  // 如果选择的路径和当前路径不同，才进行跳转
  if (index !== route.path) {
    console.log('🚀 准备跳转到:', index)
  } else {
    console.log('✅ 已在当前页面，无需跳转')
  }
}

// 组件挂载时检查菜单状态
onMounted(() => {
  console.log('Sidebar组件挂载完成')
  console.log('当前路由:', route.path)
  console.log('菜单列表:', filteredMenuList.value)
})
</script>

<style scoped>
.sidebar {
  background: #1377c9;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease-in-out;
  overflow: hidden;
}

.logo {
  height: 60px;
  line-height: 60px;
  color: rgb(241, 213, 134);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.el-menu {
  flex: 1;
  overflow-y: auto;
  border-right: none;
  min-height: 200px; /* 确保菜单有最小高度 */
}

.el-menu::-webkit-scrollbar {
  width: 4px;
}

.el-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.user-info {
  padding: 16px;
  border-top: 1px solid #333;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.nickname {
  font-size: 14px;
  color: #fff;
}

.email {
  font-size: 12px;
  color: #bbb;
}

/* 折叠状态样式 */
.sidebar-collapsed .logo span {
  display: none;
}
</style>
